<template>
  <view class="screen">
    <view class="screen-recommend">
      <template v-if="props.modelValue === 0">
        <view class="screen-recommend-title">时间</view>
        <view class="screen-recommend-item">
          <view class="btn" v-for="item in times" :class="{ 'btn-active': item.id === params.timeId }" :key="item.id" @click="onClickTimeItem(item)">
            {{ item.label }}
          </view>
        </view>
        <view class="screen-recommend-line">
          <uv-line color="#545454"></uv-line>
        </view>
      </template>
      <template v-if="[0, 1].includes(props.modelValue)">
        <view class="screen-recommend-title">舞种</view>
        <view class="screen-recommend-item">
          <view
            class="btn"
            v-for="item in vuex_dances"
            :class="{
              'btn-active': dancesData.includes(item.id)
            }"
            :key="item.id"
            @click="onClickItem(item)"
          >
            {{ item.name }}
          </view>
        </view>
        <view class="screen-recommend-line">
          <uv-line color="#545454"></uv-line>
        </view>
      </template>
      <template v-if="props.modelValue === 2">
        <view class="screen-recommend-title">排序方式</view>
        <view class="screen-recommend-dance">
          <view
            class="btn"
            v-for="item in dancesList"
            :class="{ 'btn-active': params.orderBy === item.id }"
            :key="item.id"
            @click="onClickSortItem(item)"
          >
            {{ item.label }}
          </view>
        </view>
      </template>
    </view>
    <view class="screen-btn" @click="onScreenChange">确定</view>
    <uv-toast ref="toastRef"></uv-toast>
  </view>
</template>

<script setup>
  import { ref, reactive, defineProps, defineEmits, computed, watch } from 'vue';
  import store from '@/store/index.js'; //需要引入store
  import dayjs from '@/uni_modules/uv-ui-tools/libs/util/dayjs.js';
  let { state, commit } = store;
  const toastRef = ref();

  let times = [
    { id: 1, label: '本周' },
    { id: 2, label: '今天' },
    { id: 3, label: '明天' }
  ];
  let dancesList = [
    { id: 'lesson_count', label: '按课程数排序' },
    { id: 'teacher_count', label: '按老师数排序' },
    { id: 'room_area', label: '按面积排序' },
    { id: 'room_count', label: '按舞房数排序' }
  ];
  let props = defineProps({
    modelValue: {
      type: Number,
      default: 0
    }
  });
  let params = reactive({
    timeId: undefined,
    dances: [[], []],
    orderBy: undefined
  });
  const dancesData = computed(() => {
    return params.dances[props.modelValue];
  });
  // 获取推荐偏好
  let vuex_dances = computed(() => {
    return state.vuex_dances;
  });
  let weekTime = ''; // 周日时间
  let emits = defineEmits(['onScreenChange']);

  // 获取周日时间
  const getSunday = () => {
    for (let index = 0; index < 7; index++) {
      let time = dayjs().add(index, 'day').format('YYYY-MM-DD');
      let date = new Date(time);
      if (date.getDay() == 0) {
        weekTime = time;
      }
    }
    return weekTime;
  };

  // 获取这周一时间
  const getMonday = () => {
    const time = dayjs().format('YYYY-MM-DD');
    const date = new Date(time);
    const day = date.getDay() || 7;
    let myMonth = date.getMonth() + 1;
    let myDate = date.getDate() + 1 - day;
    if (date.getMonth() + 1 < 10) {
      myMonth = '0' + myMonth;
    }
    if (date.getDate() < 10) {
      myDate = '0' + myDate;
    }
    let monday = date.getFullYear() + '-' + myMonth + '-' + myDate;

    return monday;
  };

  const onScreenChange = () => {
    let options = {};
    if (props.modelValue === 0) {
      if (params.timeId === 1) {
        // options.start = dayjs().format('YYYY-MM-DD') + ' 00:00:00';
        // options.end = dayjs().day(6).format('YYYY-MM-DD') + ' 23:59:59';
        options.start = getMonday() + ' 00:00:00';
        options.end = getSunday() + ' 23:59:59';
      } else if (params.timeId === 2) {
        const time = dayjs().format('YYYY-MM-DD');
        options.start = time + ' 00:00:00';
        options.end = time + ' 23:59:59';
      } else if (params.timeId === 3) {
        const time = dayjs().add(1, 'day').format('YYYY-MM-DD');
        options.start = time + ' 00:00:00';
        options.end = time + ' 23:59:59';
      }
    }
    if ([0, 1].includes(props.modelValue) && params.dances[props.modelValue].length) {
      options.dances = params.dances[props.modelValue];
    }
    if (props.modelValue === 2 && params.orderBy) {
      options.orderBy = [params.orderBy, 'asc'];
    }
    emits('onScreenChange', options);
  };
  let isEdit = ref(false);
  // 点击时间选择
  const onClickTimeItem = async val => {
    if (params.timeId === val.id) {
      params.timeId = undefined;
      return;
    }
    params.timeId = val.id;
  };
  // 点击舞种多i选
  const onClickItem = val => {
    if (!isEdit.value) {
      let index = params.dances[props.modelValue].findIndex(r => r === val.id);
      if (index < 0) {
        params.dances[props.modelValue].push(val.id);
      } else {
        params.dances[props.modelValue].splice(index, 1);
      }
      return;
    }
    httpData.preference.push(val);
  };
  const onClickSortItem = val => {
    if (params.orderBy === val.id) {
      params.orderBy = undefined;
      return;
    }
    params.orderBy = val.id;
  };
</script>

<style lang="scss" scoped>
  .flex-center {
    align-items: center;
    justify-content: center;
  }
  .w-100 {
    width: 100%;
  }
  .screen {
    height: 100%;
    width: 100%;
    background-color: #393d4c;
    font-size: 28rpx;
    padding: 52rpx 26rpx;
    box-sizing: border-box;
    position: relative;
    &-recommend {
      &-title {
        font-size: 35rpx;
        font-weight: bold;
        margin-bottom: 42rpx;
        margin-left: 91rpx;
      }
      &-dance {
        margin-top: 17rpx;
        padding: 0 33rpx;
        .btn {
          margin: 0 1.66666%;
          margin-bottom: 17rpx;
          padding: 12rpx 28rpx;
          border-radius: 66rpx;
          transition: all 0.3s;
          background-color: #333644;
          text-align: left;
          width: 220rpx;
          &-active {
            background-color: #ff7a66 !important;
          }
        }
      }
      &-item {
        display: flex;
        flex-wrap: wrap;
        margin-top: 17rpx;
        padding: 0 33rpx;
        .btn {
          box-sizing: border-box;
          width: 30%;
          margin: 0 1.66666%;
          margin-bottom: 17rpx;
          padding: 12rpx 28rpx;
          border-radius: 66rpx;
          transition: all 0.3s;
          background-color: #333644;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          &-active {
            background-color: #ff7a66 !important;
          }
        }
      }
      &-line {
        margin-bottom: 70rpx;
      }
    }
    &-btn {
      position: absolute;
      left: 50%;
      bottom: 10%;
      color: #fff;
      background-color: $dance-main-color;
      border-radius: 87rpx;
      font-weight: bold;
      width: 297rpx;
      height: 70rpx;
      text-align: center;
      line-height: 70rpx;
      transform: translateX(-50%);
    }
  }
</style>
